<div id="dashboard" v-cloak>
  <div class="dashboard-container container-fluid d-flex flex-column">
    <div class="dashboard-header">
      <h1 class="dashboard-title">Lets get to a better state</h1>
      <p class="dashboard-subtitle">Last Updated: <js-timestamp :at="lastUpdatedAt"></js-timestamp></p>
      <div class="dashboard-links d-flex flex-row justify-content-center">
        <p class="mr-3"><a href="/vulnerability-list">Vulnerability list</a></p>
        <p><a href="/patch-progress">Patch progress</a></p>
      </div>
    </div>

    <div class="metrics-row">
      <div class="metric-card">
        <div class="metric-value severity-critical">{{(totalUniqueCounts.critical).toLocaleString()}}</div>
        <div class="metric-label">Unique critical</div>
      </div>
      <div class="metric-card">
        <div class="metric-value severity-high">{{(totalUniqueCounts.high).toLocaleString()}}</div>
        <div class="metric-label">Unique high</div>
      </div>
      <div class="metric-card">
        <div class="metric-value severity-medium">{{(totalUniqueCounts.medium).toLocaleString()}}</div>
        <div class="metric-label">Unique medium</div>
      </div>
      <div class="metric-card">
        <div class="metric-value severity-low">{{(totalUniqueCounts.low).toLocaleString()}}</div>
        <div class="metric-label">Unique low</div>
      </div>
    </div>

    <div class="metrics-row">
      <div class="metric-card">
        <div class="metric-value severity-critical">{{(totalNumberOfVulns.critical).toLocaleString()}}</div>
        <div class="metric-label">Total critical</div>
      </div>
      <div class="metric-card">
        <div class="metric-value severity-high">{{(totalNumberOfVulns.high).toLocaleString()}}</div>
        <div class="metric-label">Total high</div>
      </div>
      <div class="metric-card">
        <div class="metric-value severity-medium">{{(totalNumberOfVulns.medium).toLocaleString()}}</div>
        <div class="metric-label">Total medium</div>
      </div>
      <div class="metric-card">
        <div class="metric-value severity-low">{{(totalNumberOfVulns.low).toLocaleString()}}</div>
        <div class="metric-label">Total low</div>
      </div>
    </div>

    <div class="main-grid">
      <div class="panel">
        <h2 class="panel-title">The riskiest hosts right now</h2>
        <p><small class="text-white">Host risk scores range from 0-10. The score weighs the number and severity of CVEs, exploit availability (public exploits double the weight). A "10" means urgent, drop-everything action: critical vulnerabilities with known exploits and high exposure.</small></p>
        <ul class="host-list">
          <li class="host-item" v-for="host in mostVulnerableHosts">
            <span class="host-name"><a :href="host.fleetUrl" target="_blank">{{host.displayName}}</a></span>
            <span class="vulnerability-score">{{host.pps}}</span>
          </li>
        </ul>
      </div>

      <div class="panel">
        <h2 class="panel-title">The usual suspects in software</h2>
        <ul class="software-list">
          <li class="software-item" v-for="software in mostVulnerableSoftware">
            <span class="software-name"><a :href="software.fleetUrl" target="_blank">{{software.softwareNameAndVersion}}</a></span>
            <span class="vuln-count">{{software.numberOfVulns}}  CVEs</span>
          </li>
        </ul>
      </div>

      <div class="panel chart-panel">
        <h2 class="panel-title">What percentage are critical?</h2>
        <div class="chart-container">
          <canvas id="severityChart"></canvas>
        </div>
      </div>
    </div>
    <div class="chart-row">
      <div class="panel">
        <h2 class="panel-title">Who installed this? (Critically rare software)</h2>
        <ul class="software-list">
          <li class="software-item" v-for="software in uniqueCriticalSoftware">
            <!-- <span class="software-name"><a :href="software.fleetUrl" target="_blank">{{software.softwareNameAndVersion}}</a></span> -->
            <span class="software-name">{{software.softwareNameAndVersion}}</span>
            <span class="vuln-count">{{software.numberOfVulns}} critical</span>
          </li>
        </ul>
      </div>
      <div class="panel">
        <h2 class="panel-title">Hosts with most CVEs</h2>
        <ul class="host-list">
          <li class="host-item" v-for="host in hostsWithMostVulns">
            <span class="host-name"><a :href="host.fleetUrl" target="_blank">{{host.displayName}}</a></span>
            <span class="vulnerability-score">{{host.numberOfVulns}}</span>
          </li>
        </ul>
      </div>
    </div>

    <div class="chart-row">
      <div class="panel">
        <h2 class="panel-title">CVE activity trends</h2>
        <div class="chart-container" style="height: 250px;">
          <canvas id="trendsChart"></canvas>
        </div>
      </div>

      <div class="panel">
        <h2 class="panel-title">Total CVE count trend</h2>
        <div class="chart-container" style="height: 250px;">
          <canvas id="totalTrendChart"></canvas>
        </div>
      </div>
    </div>

    <div class="panel full-width remediation-summary">
      <h2 class="panel-title">CVE remediation summary (past 90 Days)</h2>
      <div class="remediation-metrics">
        <div>
          <div style="font-size: 2em; color: #ef4444; font-weight: 300;">+{{remediationSummary.newCvesNinetyDays}}</div>
          <div style="color: #7d8590; font-size: 0.9em;">New CVEs (90d)</div>
        </div>
        <div>
          <div style="font-size: 2em; color: #22c55e; font-weight: 300;">-{{remediationSummary.remediatedCvesNinetyDays}}</div>
          <div style="color: #7d8590; font-size: 0.9em;">Remediated (90d)</div>
        </div>
        <div>
          <div style="font-size: 2em; color: #ef4444; font-weight: 300;">+{{remediationSummary.newCvesThirtyDays}}</div>
          <div style="color: #7d8590; font-size: 0.9em;">New CVEs (30d)</div>
        </div>
        <div>
          <div style="font-size: 2em; color: #22c55e; font-weight: 300;">-{{remediationSummary.remediatedCvesThirtyDays}}</div>
          <div style="color: #7d8590; font-size: 0.9em;">Remediated (30d)</div>
        </div>
      </div>
    </div>

    <!-- Exploitable CVE Analysis Row -->
    <div class="metrics-row">
      <div class="panel">
        <h2 class="panel-title">Top 5 oldest CVEs with exploits</h2>
        <ul class="software-list">
          <li class="software-item" v-for="cve in oldestExploitableCves">
            <span class="software-name"><a :href="cve.fleetUrl" target="_blank">{{cve.cveId}}</a></span>
            <span class="vuln-count" style="background: #dc2626;">{{cve.yearPublished}}</span>
          </li>
        </ul>
      </div>

      <div class="panel">
        <h2 class="panel-title">Top 5 hosts with oldest exploitable CVEs</h2>
        <ul class="host-list">
          <li class="host-item" v-for="host in oldestExploitableHosts">
            <span class="host-name"><a :href="host.fleetUrl" target="_blank">{{host.displayName}}</a></span>
            <span class="vulnerability-score" style="background: #7c2d12;">{{host.yearPublished}}</span>
          </li>
        </ul>
      </div>

      <div class="panel">
        <h2 class="panel-title">Top 5 newest CVEs with exploits</h2>
        <ul class="software-list">
          <li class="software-item" v-for="cve in newestExploitableCves">
            <span class="software-name"><a :href="cve.fleetUrl" target="_blank">{{cve.cveId}}</a></span>
            <span class="vuln-count" style="background: #dc2626;">{{cve.yearPublished}}</span>
          </li>
        </ul>
      </div>

      <div class="panel">
        <h2 class="panel-title">Top 5 hosts with newest exploitable CVEs</h2>
        <ul class="host-list">
          <li class="host-item" v-for="host in newestExploitableHosts">
            <span class="host-name"><a :href="host.fleetUrl" target="_blank">{{host.displayName}}</a></span>
            <span class="vulnerability-score" style="background: #7c2d12;">{{host.yearPublished}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>
